<template>
  <div>

    <div ref="main" style="width: 80vw;height: 270px;"></div>

  </div>
</template>
<script setup lang="ts">
import { getCurrentInstance, onMounted } from 'vue';

import * as echarts from 'echarts';
// export default {

const props = defineProps({
  msgTitle: {
    type: String,
    default: '',
  },
  lineTitle: {
    type: Array,
    default: [],
  },
  sourceData: {
    type: Array as PropType<any[]>,
    required: true,
    default: () => []
  }
});
// setup(props) {

const { proxy } = getCurrentInstance();

let type: string = props.msgTitle == '每日评价趋势' ? 'feedbackDate' : 'appendedFeedDate';   // 判断是追评还是首评

let newSourceData: Array<object> = reactive([]);

const calcData = () => {

  // showData.value = false;

  let sourceData = JSON.parse(JSON.stringify(props.sourceData));    // 总的数据

  // 数据处理
  sourceData.forEach(element => {
    if (element[type]) {
      element.newFeedbackDate = element[type].split('-').join('') * 1;
      newSourceData.push(element);
    };
  });


  // 排序
  for (let i = 0; i < newSourceData.length - 1; i++) {
    for (let j = 0; j < newSourceData.length - 1 - i; j++) {
      if (newSourceData[j].newFeedbackDate > newSourceData[j + 1].newFeedbackDate) {
        let tmp = newSourceData[j];
        newSourceData[j] = newSourceData[j + 1];
        newSourceData[j + 1] = tmp;
      }
    }
  }

  // 提取
  let XdayArr: Object = reactive({});   // 每个时间评论数
  let hasPicRemark: Array<number> = reactive([]);   // 有图
  let noPicRemark: Array<number> = reactive([]);   // 无图
  newSourceData.forEach((item, index) => {
    let itemType: string = item[type];
    if (XdayArr[itemType]) {
      XdayArr[itemType]++;
    } else {
      XdayArr[itemType] = 1;
    };

    // let index = Object.keys(XdayArr).indexOf(itemType);

    let picPathList = type == 'feedbackDate' ? item.feedPicPathList : item.appendedFeed ? item.appendedFeed.appendFeedPicPathList : [];

    if (picPathList && picPathList.length) {
      hasPicRemark[index] = hasPicRemark[index] ? hasPicRemark[index] + 1 : 1;
    } else {
      noPicRemark[index] = noPicRemark[index] ? noPicRemark[index] + 1 : 1;
    }
  })

  // 使用echarts 折线图
  let myChart = echarts.init(proxy.$refs.main);

  let option;

  option = {
    title: {
      text: props.msgTitle,
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: props.lineTitle || []
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      show: false,
      feature: {
        saveAsImage: {}
      }
    },
    // 滑块插件
    dataZoom: [
      {
        type: 'inside',
        xAxisIndex: [0, 1],
        start: 58,
        end: 100
      },
      {
        show: true,
        xAxisIndex: [0, 1],
        type: 'slider',
        top: '85%',
        start: 58,
        end: 100,
        // handleSize: '50%'
      },
    ],
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: Object.keys(XdayArr),
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: props.lineTitle[0] || '',
        type: 'line',
        stack: 'Total',
        data: hasPicRemark
      },
      {
        name: props.lineTitle[1] || '',
        type: 'line',
        stack: 'Total',
        data: noPicRemark
      },
    ]
  };
  option && myChart.setOption(option);
  // window.onresize = function () { // 自适应大小
  //   myChart.resize();
  // };

}

onMounted(() => {

  calcData()

});

</script>